<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">
        <ui:define name="title">
            Selo - Pesquisar
        </ui:define>

        <ui:define name="content">
            <h:form id="pesquisarSeloForm">
                
                <p:messages id="seloPesquisarMessages" autoUpdate="true" />

                <f:validateBean disabled="true">
                    
                    <p:fieldset legend="Dados">                    
                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Tipo do Selo" for="tipoSeloAutoComplete" />
                            </div>
                            <div class="column3">
                                <p:autoComplete id="tipoSeloAutoComplete" value="#{ managerPesquisarSelo.selo.tipoSelo }"
                                        forceSelection="true" dropdown="true" var="tipoSelo" itemValue="#{ tipoSelo }" 
                                        itemLabel="#{ tipoSelo.nome }" completeMethod="#{ managerPesquisarSelo.autocompletarTipoSelo }"
                                        converter="conversortiposelo" minQueryLength="3">
                                    <p:column>
                                        <div class="color" style="background: \##{ tipoSelo.corSelo }"></div>
                                    </p:column>
                                    <p:column>#{ tipoSelo.nome }</p:column>
                                </p:autoComplete>                            
                            </div>
                        </div>

                        <div class="row">
                            <div class="column2">
                                <p:outputLabel value="Número" for="numeroInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="numeroInputText" value="#{ managerPesquisarSelo.selo.numero }" />
                            </div>                            

                            <div class="column2">
                                <p:outputLabel value="Série" for="serieInputText" />
                            </div>
                            <div class="column3">
                                <p:inputText id="serieInputText" value="#{ managerPesquisarSelo.selo.serie }" />
                            </div>
                        </div>                    

                    </p:fieldset>
                    
                </f:validateBean>

                <div class="command">
                    <p:commandButton
                        id="pesquisarcommandButton" value="Pesquisar" icon="ui-icon-search"
                        styleClass="ui-priority-primary" oncomplete="widthFix();"
                        update="@form" actionListener="#{ managerPesquisarSelo.pesquisar() }" />
                    <p:commandButton value="Limpar" icon="ui-icon-close" oncomplete="widthFix();"
                        update="@form" actionListener="#{ managerPesquisarSelo.limpar() }" />                 
                </div>                

                <p:dataTable styleClass="column12" id="selosDataTable" var="selo"
                        value="#{ managerPesquisarSelo.selos }"
                        rows="5" paginselor="true" paginselorPosition="bottom" emptyMessage="Nenhuma Tipo do Ato encontrado">                    

                    <p:column headerText="Opções" width="10%">
                        <div class="options2">
                            <p:button
                                title="Visualizar" href="visualizarSelo.xhtml?seloId=#{ selo.id }"
                                icon="ui-icon-search"/>
                            <p:button
                                title="Cancelar" href="cancelarSelo.xhtml?seloId=#{ selo.id }"
                                icon="ui-icon-cancel"/>
                        </div>
                    </p:column>

                    <p:column headerText="Número" width="45%">
                        <h:outputText value="#{ selo.numero }" />
                    </p:column>

                    <p:column headerText="Série" width="50%">
                        <h:outputText value="#{ selo.serie }" />
                    </p:column>                    
                    
                </p:dataTable>                

            </h:form>
        </ui:define>
    </ui:composition>

</html>
